<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button>选择图片</button>
  <hr>
  <img src="../src/assets/images/avatar.jpg" alt="">
  <script>
    let btn = document.querySelector('button')
    let input = document.querySelector('input')
    let img = document.querySelector('img')

    // 1.点击按钮，如何选择图片（必须加文件选择框，点击按钮的时候，触发文件选择框的单击事件
    btn.addEventListener('click', function () {
      input.click()
    })
    // 2.当选择完图片之后，做预览效果（找到input.条嫁 change 事件）
    input.addEventListener('change', function () {
      // 判断，选择了图片，就做预览效果，点击了取消，没有选图片，那就不做预览效果了
      // 无论是判断选择没选择图片，还是做预览，化石上传，都需要找到文件对象才行
      // input。files-------表示选择的文件列表，是一个伪数组
      // console.log(input.files)
      if (inpt.files.length > 0) {
        let fileobj = input.files[0]
        // console.log(fileobj);
        // 预览方案一：使用URL对象
        // let url=URL.createobjectURL(fileobj)//URL.createobjectURL   临时创建一个访问图片的地址
        // console.log(url);
        // img.src=url

        // 预览方案二：使用 readAsDataURL 对象
        let fr = new FileReader()
        fr.readAsDataURL(fileobj)//图片转成 base64  格式  并将结果存储到 result中
        // 等图片加载完成，才能获取结果
        fr.onload = function () {
          // console.log(fr.result);//得到base64
          img.src = fr.result
        }
      } else {
        // 说明没有选择图片

      }
    })
  </script>
</body>

</html>